<template>
  <div class="telecomLicense-details-container">
    <HeaderIndex title="电信许可详情" />
    <div class="telecomLicense-info">
      <div :class="item.className" v-for="item in list" :key="item.name">
        <h3>{{ item.name }}</h3>
        <div>
          <p v-for="(childrenItem, index) in item.childrenList" :key="index">
            <span>{{ childrenItem.title }}</span>
            <span>{{ getValue(childrenItem.field) }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTelecomLicense } from "@/api";
import { Toast, isEmptyData } from "@/utils";
import { get as _get } from "lodash";
import HeaderIndex from "@/components/header";
export default {
  name: "TelecomLicenseDetails",
  components: {
    HeaderIndex,
  },
  data() {
    return {
      obj: {}, //数据对象
      list: [
        //信息表格
        {
          name: "基本信息",
          className: "essential-info",
          childrenList: [
            { title: "公司名称", field: "companyName" },
            { title: "许可证号", field: "licenseNumber" },
            { title: "是否有效", field: "isAvailable" },
            { title: "业务及其覆盖范围", field: "businessScope" },
          ],
        },
        {
          name: "年报公示",
          className: "annual-info",
          childrenList: [
            { title: "公司名称", field: "companyName" },
            { title: "统一社会值用代码", field: "creditCode" },
            { title: "法定代表人", field: "legalPersonName" },
            { title: "许可证编号", field: "licenseNumber" },
            { title: "注册地址", field: "regLocation" },
            { title: "注册属地", field: "regTerritoriality" },
            { title: "注册资本", field: "regCapital" },
            { title: "许可证业务种类", field: "licenseBusiType" },
            { title: "企业性质", field: "companyType" },
            { title: "上市情况", field: "listedState" },
            { title: "股票代码", field: "stockCode" },
            { title: "客户服务按诉电话", field: "customerComplainPhone" },
            { title: "用户投诉量", field: "userComplainNum" },
            { title: "用户投诉回复率", field: "userComplainReplyRate" },
          ],
        },
      ],
    };
  },
  async created() {
    try {
      Toast.startLoading();

      //获取路由参数
      const { companyName, pageNum, index } = this.$route.query;

      //获取电信许可信息
      const { items = [] } =
        (await getTelecomLicense({
          companyName,
          pageNum,
        })) || {};

      //赋值显示信息
      this.obj = items[index];
    } finally {
      Toast.closeLoading();
    }
  },
  methods: {
    /**
     * 获取数据值
     * @param {*} field 字段名称
     */
    getValue(field) {
      return isEmptyData(_get(this.obj, field));
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/assets/styles/telecomLicenseDetails/index.less");
</style>